<template>
  <el-container>
    <el-card style="width: 95%; margin: 20px auto">
      <el-button @click="handleAddCampus" type="primary">添加校区</el-button>
      <el-table :data="campusList" stripe style="margin-top: 20px">
        <el-table-column prop="campusName" label="名称"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column fixed="right" label="操作" style="max-width: 20%">
          <template v-slot="scope">
            <el-button text type="primary" size="small" @click="handleEditCampus(scope.row)">编辑校区</el-button>
            <el-button text type="danger" size="small" @click="deleteCampus(scope.row)"
            >删除校区
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        :title="dialogTittle"
        v-model="dialogVisible"
        width="30%">
      <el-form
          ref="dialogForm"
          :model="dialogForm"
          label-width="80px"
          :rules="formRules"
      >
        <el-form-item label="名称" prop="campusName">
          <el-input v-model="dialogForm.campusName"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="dialogForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onConfirm">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import {addCampus, delCampus, editCampus, getAllCampus} from '@/api'

export default {
  props: {},
  data() {
    return {
      campusList: [],
      dialogVisible: false,
      dialogStatus: null,
      dialogTittle: null,
      dialogForm: {
        campusName: null,
        address: null,
      },
      formRules: {
        campusName: [
          {required: true, message: '请输入校区名称', trigger: 'blur'},
        ],
        address: [
          {required: true, message: '请输入校区地址', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    handleAddCampus() {
      this.dialogStatus = 'add'
      this.dialogVisible = true
      this.dialogTittle = '添加校区'
    },
    handleEditCampus(campus) {
      this.dialogStatus = 'edit'
      this.dialogForm = campus
      this.dialogVisible = true
      this.dialogTittle = '编辑校区'
    },
    deleteCampus(campus) {
      this.$confirm('此操作将永久删除该校区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delCampus(campus.id).then((response) => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.getCampus()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!',
            })
          }
        })
      })
    },
    addCampus() {
      addCampus(this.dialogForm).then((response) => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '添加成功!',
          })
        }
      })
    },
    editCampus() {
      editCampus(this.dialogForm).then((response) => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '编辑成功!',
          })
        }
      })
    },
    onConfirm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogStatus === 'add') {
            this.addCampus()
          } else if (this.dialogStatus === 'edit') {
            this.editCampus()
          }
          this.dialogVisible = false
          this.closeDialog()
          this.getCampus()
        } else return
      })
    },
    closeDialog() {
      this.dialogStatus = ''
      this.dialogVisible = false
      this.dialogForm = {}
      this.dialogTittle = ''
    },
    getCampus() {
      getAllCampus().then((response) => {
        this.campusList = response.data
      })
    },
  },
  created() {
    this.getCampus()
  },
}
</script>

<style
    lang="less"
    scoped
    src="@/assets/style/CampusManagement.less"
></style>
